<template>
  <!-- 仓库 -->
  <div>
    <el-button
      type="primary"
      size="mini"
      @click="choose"
      :disabled="readonly"
      >{{ $t('选择') }}</el-button
    >
    <template v-if="batchVisible">
      <div
        v-if="correlationList && correlationList.length"
        class="correlation-list"
      >
        <div
          v-for="(item, index) in correlationList"
          :key="item.correlationId"
          class="correlation-item"
        >
          <span>{{ item.warehouseCode }} {{ item.warehouseName }}</span>
          <i class="el-icon-close" @click="deleteData(index)"></i>
        </div>
      </div>
    </template>
    <span v-else style="margin-left: 10px"
      >{{ selectData.warehouseCode }}{{ selectData.warehouseName }}</span
    >
    <el-dialog
      :modal="false"
      :title="$t('选择仓储')"
      v-if="show"
      :visible.sync="show"
      width="100%"
      :before-close="handleClose"
    >
      <el-form :model="formList" label-width="120px" ref="formData">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('仓储编号:')" prop="correlationCode">
              <el-input v-model="formList.correlationCode" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('仓储名称:')" prop="correlationName">
              <el-input v-model="formList.correlationName" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="flex-end">
            <el-form-item>
              <el-button type="primary" @click="getTableData">{{
                $t('搜 索')
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="batchVisible"
          type="selection"
          :selectable="checkSelectable"
          :reserve-selection="true"
          width="55"
        ></el-table-column>
        <el-table-column v-else :label="$t('单选')" width="50px">
          <template slot-scope="{ row }">
            <el-radio v-model="radio" :label="row">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('仓储编号')"
          prop="warehouseCode"
        ></el-table-column>
        <el-table-column
          prop="warehouseName"
          :label="$t('仓储名称')"
          show-word-limit
        ></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right; margin-top: 1%; white-space: normal"
          :total="page.total"
          size="small"
        ></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">{{
          $t('确 定')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'warehouse',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageType: String,
  },

  data() {
    return {
      options: [],
      warehouseId: null,
      loading: false,
      readonly: false,
      selectData: {},
      radio: '',
      tableData: [],
      page: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0,
      },
      multipleSelection: [],
      show: false,
      formList: {},
      batchVisible: false,
      correlationList: [],
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (
      this.detail.templateTypeCode == 'WMSHZ1' &&
      (this.$route.query.pageFrom == 'add' || this.pageType == 'template')
    ) {
      this.batchVisible = true
    } else {
      this.batchVisible = false
    }
    if (this.value) {
      this.setData()
    }
    if (this.$route.query.contractSource == 1) {
      this.readonly = true
    }
  },
  methods: {
    choose() {
      this.show = true
      this.getTableData()
    },
    getTableData() {
      let params = {
        keywords:
          this.formList.correlationCode ||
          this.formList.correlationName ||
          undefined,
        isDivided: 1,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        userId: localStorage.getItem('userId'),
      }
      nonStandardService.queryWarehouseConditions(params).then((res) => {
        this.tableData = res.data.list || []
        this.page.total = res.data.total
      })
    },
    getRowKeys(row) {
      return row.warehouseId
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    checkSelectable(row, index) {
      let flag = (this.correlationList || []).some(
        (it) => it.value == row.warehouseId
      )
      return !flag
    },
    chooseRow(row) {},
    handleSubmit() {
      if (this.batchVisible) {
        if (this.multipleSelection && this.multipleSelection.length) {
          let data = this.multipleSelection.map((item) => {
            return {
              value: item.warehouseId,
              warehouseCode: item.warehouseCode,
              warehouseName: item.warehouseName,
            }
          })
          let list = this.correlationList.concat(data)
          if (list.length > 5) {
            this.$message.error(this.$t('最多只能选择5个仓储'))
            return
          }
          this.correlationList = this.correlationList.concat(data)
          this.$emit('input', JSON.stringify(this.correlationList))
          this.multipleSelection = []
          this.selectData = {}
          localStorage.setItem('warehouseId', '')
          localStorage.setItem('warehouse', JSON.stringify({}))
          this.warehouseId = null
          this.handleClose()
        } else {
          this.$message.error(this.$t('请选择仓储'))
          return
        }
      } else {
        if (this.radio) {
          this.selectData = {
            ...this.radio,
            correlationCode: this.radio.warehouseCode,
            correlationName: this.radio.warehouseName,
          }
          localStorage.setItem('warehouseId', this.radio.warehouseId)
          localStorage.setItem('warehouse', JSON.stringify(this.radio))
          this.warehouseId = this.radio.warehouseId
          this.$emit('input', this.radio.warehouseId)
          this.handleClose()
        } else {
          this.$message.error(this.$t('请选择仓储'))
          return
        }
      }
    },
    handleClose() {
      this.formList = {}
      this.show = false
    },
    handleSizeChange(val) {
      this.page.pageNum = 1
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    deleteData(index) {
      this.correlationList.splice(index, 1)
    },
    setData() {
      let data = JSON.parse(this.value)
      if (this.batchVisible) {
        this.correlationList = data instanceof Array ? data : []
        if (this.correlationList.length) {
          this.$emit('input', JSON.stringify(this.correlationList))
        } else {
          this.$emit('input', '')
        }
      } else {
        this.selectData = data || {}
        this.warehouseId = data.value
        this.$emit('input', this.warehouseId)
        localStorage.setItem('warehouseId', this.warehouseId)
        localStorage.setItem('warehouse', JSON.stringify(this.selectData))
      }
    },
    getData() {
      let params = {
        value: this.warehouseId,
        warehouseCode: this.selectData.warehouseCode,
        warehouseName: this.selectData.warehouseName,
      }
      return this.batchVisible ? this.correlationList : params
    },
  },
}
</script>
